<template>
  <!-- UEditor -->
  <div id="wangeditor" >
    <div ref="editor" :disable="disabled" style="text-align:left;"></div>
  </div>
</template>
<script>
  // import axios from '../../util/axiosConfig/axios'
  import {
    baseUrl
  } from '@/config/env'
  import E from 'wangeditor'
  import {getStore} from "@/config/mUtils"

  export default {
    name: "editor",
    components: {},
    props: {
      disabled: {
        type: Boolean,
        default: false
      },
      value: {
        type: String,
        default: ''
      },
      // max: {
      //   type: Number,
      //   default: 0
      // }
    },
    model: {
      prop: 'value',
      event: 'change'
    },
    data() {
      return {
        editor: null,
        editorContent: '',
        isChange:false,
      };
    },
    watch: {
      value: function (value) {
        // if(!value){      //这是为了解决输入时光标乱跳
        //   this.editor.txt.html(this.value);
        // }
        // else if (value !== this.editor.txt.html()) {
        //   this.editor.txt.html(this.value)
        // }
        if (!this.isChange) {
          this.editor.txt.html(this.value);
        }
        this.isChange = false;

      },

    },
    methods: {},
    mounted() {
      let _this = this;
      this.editor = new E(this.$refs.editor);    //创建富文本实例
      //  this.editor.customConfig.emotions = [
      //     {
      //         // tab 的标题
      //         title: 'emoji',
      //         // type -> 'emoji' / 'image'
      //         type: 'emoji',
      //         // content -> 数组
      //         content: '😀 😃 😄 😁 😆 😅 😂 😊 😇 🙂 🙃 😉 😓 😪 😴 🙄 🤔 😬 🤐'.split(/\s/)
      //     },
      //     {
      //         // tab 的标题
      //         title: '手势',
      //         // type -> 'emoji' / 'image'
      //         type: 'emoji',
      //         // content -> 数组
      //         content: ['🙌', '👏', '👋', '👍', '👎', '👊', '✊', '️👌', '✋', '👐', '💪', '🙏', '️👆', '👇', '👈', '👉', '🖕', '🖐', '🤘']
      //     }
      // ];
      this.editor.customConfig.onchangeTimeout = 0
      this.editor.customConfig.onchange = (html) => {
        //  console.log('onchange')
        //  if(html.length<=this.max){
        //   this.editorContent = html;
        //   this.$emit('update:value',this.editorContent)
        //  }else{
        //    console.log('测试超长');
        //     this.editor.txt.html(this.editorContent)
        //  }
        this.editorContent = html;
        this.$emit('update:value', this.editorContent);// 将内容同步到父组件中
        // this.$emit('change', this.editorContent)
      };
      this.editor.customConfig.menus = [
        'head',  // 标题
        'bold',  // 粗体
        'fontSize',  // 字号
        'fontName',  // 字体
        'italic',  // 斜体
        'underline',  // 下划线
        'strikeThrough',  // 删除线
        'foreColor',  // 文字颜色
        'backColor',  // 背景颜色
        'link',  // 插入链接
        'list',  // 列表
        'justify',  // 对齐方式
        'quote',  // 引用
        // 'emoticon',  // 表情
        // 'image',  // 插入图片
        'table',  // 表格
        // 'video',  // 插入视频
        // 'code',  // 插入代码
        'undo',  // 撤销
        'redo'  // 重复
      ];

      this.editor.customConfig.uploadFileName = 'file';
      this.editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
      this.editor.customConfig.uploadImgMaxLength = 5;
      this.editor.customConfig.uploadImgHeaders = {
        'Authorization': getStore('token')
      };

      this.editor.create();
      this.editor.txt.html(this.value)
    },
    created() {
    }
  };
</script>
<style>
  .w-e-text-container {
    height: 200px !important;
    z-index: 1 !important;
  }
  .w-e-menu {
    z-index: 2 !important;
  }

  .edui-default .edui-box {
    border: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
    height: 20px;
  }

</style>
